<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}, 放大后{{ bigSum }}</h2> s
    <h2>{{ school }} {{ address }} ，学校大写 {{ toUpperSchool }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increase">加</button>
    <button @click="decrease">减</button>
    <button @click="add">加</button>
    <button @click="edit">加</button>
    <hr>
    <div style="margin-top: 40px;">
      <LoveTalk></LoveTalk>
    </div>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { defineComponent, ref } from 'vue'
  import LoveTalk from './LoveTalk.vue';
  import { useCountStore } from '@/store/count';
  import { storeToRefs } from 'pinia';

  defineComponent({ components: { LoveTalk } })

  const countStore = useCountStore()
  console.log(25, countStore)
  let n = ref(1)
  // storeToRefs 只把store中的数据变成响应式，不改store中的方法，如果用ref则会把store中所有都变成响应式
  const { sum, school, address, bigSum, toUpperSchool } = storeToRefs(countStore)

  const edit = () => {
    countStore.school += n.value
    countStore.address += n.value
  }

  const increase = () => {
    // 第一种修改方式
    countStore.sum += n.value

    // 第二种修改方式, 可批量修改
    // countStore.$patch({
    //   sum: 666,
    //   school: '清华大学',
    //   address: '北京市'
    // })
  }

  const add = () => {
    // 第三种修改方式(意义：可承受复杂逻辑及复用)
    countStore.increment(n.value)
  }
  const decrease = () => {
    countStore.decrement(n.value)
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select, button {
    margin: 0 5px;
    height: 25px;
  }
</style>